<template>
  <div class="type-list">
    <div class="input-container">
      文本输入框：
      <th-input v-model="inputValue"></th-input>
    </div>
    <div class="input-container">
      数字输入框：
      <th-input v-model="numberValue" type="number"></th-input>
    </div>
    <div class="input-container">
      date输入框：
      <th-input v-model="dateValue" type="date"></th-input>
    </div>
    <div class="input-container">
      datetimeLocal输入框：
      <th-input v-model="datetimeLocalValue" type="datetime-local"></th-input>
    </div>
    <div class="input-container">
      month输入框：
      <th-input v-model="monthValue" type="month"></th-input>
    </div>
    <div class="input-container">
      time输入框：
      <th-input v-model="timeValue" type="time"></th-input>
    </div>
    <div class="input-container">
      week输入框：
      <th-input v-model="timeValue" type="week"></th-input>
    </div>
    <div class="input-container">
      email输入框：
      <th-input v-model="emailValue" type="email"></th-input>
    </div>
    <div class="input-container">
      color输入框：
      <th-input v-model="colorValue" type="color"></th-input>
    </div>
    <div class="input-container">
      search输入框：
      <th-input @search="onSearch" type="search"></th-input>
    </div>
  </div>
  <div class="markdown-container">
    <Markdown :source="source" />
  </div>
</template>
<script lang="ts" setup>
import ThInput from "@lib/Input";
import { watch, ref } from "vue";
import Markdown from "vue3-markdown-it";

const source = `
#### :sparkles: 输入框组件使用 :sparkles:

    import ThInput from "@lib/Input";
    
#### :sparkles: 按钮类别 :sparkles:

    【"text", "number", "date", "datetime", "datetime-local", "color", "email", "month", "search", "time", "week"】

    <th-input v-model="inputValue"></th-input>
    <th-input v-model="inputValue" type="number"></th-input>
`;

const inputValue = ref("");
const numberValue = ref(0);
const dateValue = ref("");
const datetimeLocalValue = ref("");
const monthValue = ref("");
const timeValue = ref("");
const emailValue = ref("");
const colorValue = ref("");
const weekValue = ref("");
const searchValue = ref("");

watch(
  () => inputValue.value,
  val => {
    console.log("text", val);
  }
);
watch(
  () => dateValue.value,
  val => {
    console.log("date", val);
  }
);
watch(
  () => datetimeLocalValue.value,
  val => {
    console.log("date time local", val);
  }
);
watch(
  () => monthValue.value,
  val => {
    console.log("month", val);
  }
);
watch(
  () => timeValue.value,
  val => {
    console.log("time", val);
  }
);
watch(
  () => weekValue.value,
  val => {
    console.log("week", val);
  }
);
watch(
  () => numberValue.value,
  val => {
    console.log("number val", val);
  }
);

function onSearch(val: string | number) {
  console.log("search", val);
}
</script>
<style lang="scss" scoped>
.input-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.markdown-container {
  padding: 20px;
  width: 650px;
  height: 300px;
}
</style>
